<template>
	<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
		<!-- 遮罩层 -->
		<view class="mask"></view>
		<view class="layers layer" @tap.stop="discard">
			<scroll-view scroll-y="true" class="sku_scroll">
					<!-- 第一层 -->
					<view class="lists" v-for="(item, n) in sku" :key="n">
						<p class="sku_name">{{ item.title }}</p>
						<view class="list_box">
							<p
								v-for="(item1, index) in item.goods_spec_item"
								:key="index"
								@click="setSkuList(item1.item_title, n, index)"
								:style="{color: subIndex[n] == index ? colors.color :'',borderColor: subIndex[n] == index ?colors.color:''}"
								v-bind:class="[item1.isShow ? '' : 'noneActive', subIndex[n] == index ? 'productActive' : '']"
							>
								{{ item1.item_title }}
							</p>
						</view>
					</view>
				</scroll-view>
				<view class="price_box">
					<p class="kucun">库存：{{kucun}}</p>
					<view class="number">
						<view class="sub" @tap.stop="sub(row)"><view class="icon jian"></view></view>
						<view class="input" @tap.stop="discard"><input type="number" v-model="number" @input="sum" /></view>
						<view class="add" :style="{ background: number < kucun ? colors.color :'#f2f2f2' }" @tap.stop="add(row)"><view class="icon jia"></view></view>
					</view>
					<p class="p1">
						<text class="text1">已选规格：</text>
						<text class="text2" v-if="item" v-for="(item, index) in selectArr" :key="index">{{ item }}</text>
					</p>
					<view class="bottom">
						<p class="left">￥{{price}}</p>
						<p class="right" :class="[kucun == 0 ? 'noactive':'']">加入购物车</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			spec: ['XS', 'S', 'M', 'L', 'XL', 'XXL'],
			number: 1,
			selectSpec: null //选中规格
		};
	},
	props: {
		specClass: String //规格弹窗css类，控制开关动画
	},
	methods: {
		hideSpec() {
			console.log('点击了')
			//回调
			this.$emit('hideSpec')
		},
		discard() {
			//丢弃
		},
		setSelectSpec(index) {
			this.selectSpec = index;
		},
		specCallback() {
			return;
		},
		sub() {},
		add() {},
		skuSubmit(){//完成规格选择
			let sku = {}
			sku.name = '测试商品1'
			sku.id = 1
			this.$emit('skuSubmit',sku)
		}
	}
};
</script>

<style lang="scss" scoped>

</style>
